<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>futurecoder : Le code du futur, c'est vous !</title>
    <link href="https://fonts.googleapis.com/css?family=Heebo:400,400i,500,700|Titillium+Web:600"
        rel="stylesheet">
    <link rel="stylesheet" href="static/css/brochure/style.css" />
    <link rel="stylesheet" href="./static/brochure/layout/_header.scss"/>
    <link rel="stylesheet" href="static/css/home.css" />
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="shortcut icon" type="image/png" href="static/logo/favicon_32px.png" />
    <meta property="og:title" content="futurecoder : Le code du futur, c'est vous !" />
    <meta property="og:type" content="website" />
    <meta property="og:description"
        content="Cours Python à destination des débutants 100% gratuit et interactif" />
    <meta property="og:image" content="https://futurecoder.io/static/logo/bordered.png" />
</head>

<body onload="AOS.init({once:true})">
    <div class="body-wrap boxed-container home-page">
        <div style="position:fixed; z-index:0; top:0; left:0; width:100%; height:100%;">
            <canvas id="canvas" style="width:100%; height:100%;"></canvas>
        </div>

        <header class="site-header">
            <div class="container">
                <div class="site-header-inner">
                    <div class="brand header-brand float-left">
                        <img id="logo" src="static/logo/bordered.png" data-aos="fade-right"
                            data-aos-delay="0">
                    </div>
                    <div class="navbar float-right" data-aos="fade" data-aos-duration="1000" data-aos-delay="1000">
                        <a href="http://futurecoder.io">
                            <img class="translation-icon" src="static/img/icons/language.png"/> English
                        </a>
                        <a href="http://es.futurecoder.io">
                            <img class="translation-icon" src="static/img/icons/language.png"/> Español
                        </a>
<!--                        <a href="http://fr.futurecoder.io">-->
<!--                            <img class="translation-icon" src="static/img/icons/language.png"/> Français-->
<!--                        </a>-->
                        <a href="http://pl.futurecoder.io">
                            <img class="translation-icon" src="static/img/icons/language.png"/> Polski
                        </a>
                        <a href="http://ta.futurecoder.io">
                            <img class="translation-icon" src="static/img/icons/language.png"/> தமிழ்
                        </a>
                        <a href="http://zh.futurecoder.io">
                            <img class="translation-icon" src="static/img/icons/language.png"/> 中文
                        </a>
                        <a href="https://github.com/alexmojaki/futurecoder">
                            <i class="fab fa-github"></i> Github
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <!-- todo: login button -->
        <main>
            <section class="hero">
                <div class="container center-content">
                    <div class="hero-inner">
                        <div>
                            <h1 class="hero-title mt-0 is-revealing" data-aos="fade-right"
                                data-aos-delay="100">
                                futurecoder
                            </h1>
                            <h3 class="hero-paragraph is-revealing" data-aos="fade-right"
                                data-aos-delay="200">
                                Le code du futur, c'est vous !
                            </h3>


                            <div class="bullets-inner section-inner">
                                <div class="bullets-wrap">
                                    <div class="bullet" data-aos="fade-up" data-aos-delay="500"
                                        data-aos-offset="-200px">
                                        <div class="bullet-inner">
                                            <div class="bullet-header mb-16">
                                                <div class="bullet-icon mr-16">
                                                    <svg width="32" height="32"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <g fill="none" fill-rule="nonzero">
                                                            <path
                                                                d="M16 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4z"
                                                                fill="#4353FF" />
                                                            <path
                                                                d="M27 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4z"
                                                                fill="#43F1FF" />
                                                            <path
                                                                d="M27 12c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"
                                                                fill="#4353FF" />
                                                            <path
                                                                d="M5 23c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"
                                                                fill="#43F1FF" />
                                                            <path
                                                                d="M27 23c-1.859 0-3.41 1.28-3.858 3h-3.284A3.994 3.994 0 0 0 17 23.142v-3.284c1.72-.447 3-2 3-3.858 0-2.206-1.794-4-4-4-1.859 0-3.41 1.28-3.858 3H8.858A3.994 3.994 0 0 0 6 12.142V8.858c1.72-.447 3-2 3-3.858 0-2.206-1.794-4-4-4S1 2.794 1 5c0 1.858 1.28 3.41 3 3.858v3.284c-1.72.447-3 2-3 3.858 0 2.206 1.794 4 4 4 1.859 0 3.41-1.28 3.858-3h3.284A3.994 3.994 0 0 0 15 19.858v3.284c-1.72.447-3 2-3 3.858 0 2.206 1.794 4 4 4 1.859 0 3.41-1.28 3.858-3h3.284c.447 1.72 2 3 3.858 3 2.206 0 4-1.794 4-4s-1.794-4-4-4z"
                                                                fill="#4353FF" />
                                                        </g>
                                                    </svg>
                                                </div>
                                                <h4 class="bullet-title m-0">Du nouveau dans les cours en ligne interactifs</h4>
                                            </div>
                                            <!--p class="text-sm mb-0">...</p-->
                                        </div>
                                    </div>
                                    <div class="bullet" data-aos="fade-up" data-aos-delay="600"
                                        data-aos-offset="-200px">
                                        <div class="bullet-inner">
                                            <div class="bullet-header mb-16">
                                                <div class="bullet-icon mr-16">
                                                    <svg width="32" height="32"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <g fill-rule="nonzero" fill="none">
                                                            <path
                                                                d="M7 8H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zM19 8h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z"
                                                                fill="#4353FF" />
                                                            <path
                                                                d="M19 20h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z"
                                                                fill="#43F1FF" />
                                                            <path
                                                                d="M31 8h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z"
                                                                fill="#4353FF" />
                                                            <path
                                                                d="M7 20H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z"
                                                                fill="#43F1FF" />
                                                            <path
                                                                d="M7 32H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z"
                                                                fill="#4353FF" />
                                                            <path
                                                                d="M29.5 18h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5z"
                                                                fill="#43F1FF" />
                                                            <path
                                                                d="M17.5 30h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5zM29.5 30h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5z"
                                                                fill="#4353FF" />
                                                        </g>
                                                    </svg>
                                                </div>
                                                <h4 class="bullet-title m-0">100 % Libre et Open-Source
                                                </h4>
                                            </div>
                                            <!--p class="text-sm mb-0">...</p-->
                                        </div>
                                    </div>
                                    <div class="bullet" data-aos="fade-up" data-aos-delay="700"
                                        data-aos-offset="-200px">
                                        <div class="bullet-inner">
                                            <div class="bullet-header mb-16">
                                                <div class="bullet-icon mr-16">
                                                    <svg width="32" height="32"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <g fill-rule="nonzero" fill="none">
                                                            <path
                                                                d="M4 12H0V5a5.006 5.006 0 0 1 5-5h7v4H5a1 1 0 0 0-1 1v7z"
                                                                fill="#43F1FF" />
                                                            <path
                                                                d="M32 12h-4V5a1 1 0 0 0-1-1h-7V0h7a5.006 5.006 0 0 1 5 5v7zM12 32H5a5.006 5.006 0 0 1-5-5v-7h4v7a1 1 0 0 0 1 1h7v4z"
                                                                fill="#4353FF" />
                                                            <path
                                                                d="M27 32h-7v-4h7a1 1 0 0 0 1-1v-7h4v7a5.006 5.006 0 0 1-5 5z"
                                                                fill="#43F1FF" />
                                                        </g>
                                                    </svg>
                                                </div>
                                                <h4 class="bullet-title m-0">Spécialement adapté si vous débutez en Python</h4>
                                            </div>
                                            <!--p class="text-sm mb-0">...</p-->
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div data-aos="fade-in" data-aos-delay="1000" data-aos-offset="-600px">
                                <a class="button button-primary button-complimentary-color button-block big"
                                    href="/course/">
                                    <i class="fa fa-chevron-right"></i><i
                                        class="fa fa-chevron-right"></i><i
                                        class="fa fa-chevron-right"></i> Débuter le cours
                                </a>

                                <span style="margin: 0 1em">ou</span>

                                <a class="button button-primary button-block big"
                                    href="/course/#ide">
                                    <i class="fa fa-chevron-right"></i><i
                                        class="fa fa-chevron-right"></i><i
                                        class="fa fa-chevron-right"></i> Utiliser Python
                                </a>
                            </div>

                        </div>
                        <div class="hero-illustration">
                            <div id="hero-image" class="is-moving-object is-rotating">
                                <img width="640" height="540" src="static/img/terminal.png">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="spacer"></div>
                <div class="spacer"></div>
                <div class="spacer"></div>

                <div class="container flex" style="justify-content: center" data-aos="fade-down"
                    data-aos-duration="1800" data-aos-delay="1200" data-aos-offset="-800px">
                    <div id="scroll-animation">
                        <a href="#header-end-anchor"><span></span></a>
                    </div>
                </div>
                <div id="header-end-anchor"></div>

            </section>


            <section id="testimonials">
                <div class="container" data-aos="fade-up" data-aos-duration="800"
                    data-aos-offset="200">
                    <h1 class="center-text">Ce qu'en disent les autres</h1>
                    <div class="badges">
                        <div class="badge">
                            <a
                                href="https://www.reddit.com/r/learnprogramming/comments/qjs3wh/i_built_futurecoder_a_100_free_and_interactive/">
                                <div class="center-text">
                                    <i class="fab fa-reddit-alien"></i>
                                    r/LearnProgramming
                                </div>
                                <div class="flex">
                                    <span><i class="fa fa-arrow-up"></i> 1786</span>
                                    <span><i class="fa fa-medal"></i> 36</span>
                                    <span><i class="fa fa-comments"></i> 118</span>
                                </div>
                            </a>
                        </div>
                        <div class="badge">
                            <a
                                href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/i_built_futurecoder_a_100_free_and_interactive/">
                                <div class="center-text">
                                    <i class="fab fa-reddit-alien"></i>
                                    r/InternetIsBeautiful
                                </div>
                                <div class="flex">
                                    <span><i class="fa fa-arrow-up"></i> 560</span>
                                    <span><i class="fa fa-medal"></i> 6</span>
                                    <span><i class="fa fa-comments"></i> 37</span>
                                </div>
                            </a>
                        </div>
                        <div class="badge">
                            <a href="https://github.com/alexmojaki/futurecoder">
                                <div class="center-text">
                                    <i class="fab fa-github"></i>
                                    GitHub
                                </div>
                                <div class="flex">
                                    <span><i class="fa fa-star"></i> 1300+</span>
                                </div>
                            </a>
                        </div>
                        <div class="badge testimonial">
                            <a href="https://github.com/alexmojaki/futurecoder/issues/164">
                                J'utilise w3schools et d'autres applications, mais
                                <strong>
                                    celle-ci est de loin la meilleure application interactive qu'on puisse trouver
                                </strong>
                                actuellement. Merci beaucoup de l'avoir créée.
                            </a>
                        </div>
                        <div class="badge testimonial">
                            <a
                                href="https://www.reddit.com/r/Python/comments/pieyuu/i_built_futurecoder_a_free_interactive_python/hefgowx">
                                <strong>C'est génial ! Je l'adore !</strong>
                                J'ai l'impression que ça aurait été
                                <strong>un moyen tellement plus facile d'apprendre</strong>
                                que je suis presque déçu de ne pas l'avoir eu à mes débuts.
                            </a>
                        </div>
                        <div class="badge testimonial">
                            <a
                                href="https://www.youtube.com/watch?v=un1BrrV57PA&lc=UgxTuVzf0xK0RuqLgeZ4AaABAg">
                                Futurecoder est le
                                <strong>meilleur tutoriel de programmation interactif (ou non)
                                    que j'ai jamais testé</strong>.
                                Un rythme soutenu, une interface utilisateur parfaite.
                            </a>
                        </div>
                        <div class="badge testimonial">
                            <a
                                href="https://www.reddit.com/r/learnprogramming/comments/rmv603/im_a_senior_c_software_developer_and_i_want_to/hprxyn6/">
                                <strong>Je préfère largement cette méthode à Codecademy.</strong>
                                Vous êtes à 99 % en activité en faisant les exercices.
                                <strong>Plus de cours doivent être enseignés de cette façon ! J'adore !</strong>
                            </a>
                        </div>
                        <div class="badge testimonial">
                            <a
                                href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/comment/hjlwk1c/">
                                Super ressource. C'était extrêmement bien conçu.
                                <strong>Beaucoup de cours pourraient utiliser ces technologies.</strong>
                            </a>
                        </div>
                        <div class="badge testimonial">
                            <a
                                href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/comment/hk0mfcq/">
                                Honnêtement, je n'ai jamais été intéressé par le codage,
                                mais votre cours est <strong>vraiment facile à utiliser</strong>
                                et donc j'apprends la programmation tous les jours.
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <section id="features">
                <div class="container">
                    <div data-aos="fade-up" data-aos-duration="800" data-aos-offset="200">
                        <h1 class="center-text">Jetez un œil !</h1>
                    </div>
                    <div class="spacer"></div>

                    <div>
                        <div class="feature flex">
                            <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                                <img src="static/img/features/layout.png">
                            </div>
                            <div class="feature-text" data-aos="fade-right" data-aos-duration="800"
                                data-aos-delay="200">
                                <div class="feature-header">
                                    <div class="feature-line"></div>
                                    <h3>100 % interactif</h3>
                                </div>
                                <p>
                                    Les utilisateurs doivent exécuter leur code dans la console et l'éditeur fournis afin de progresser
                                </p>
                            </div>
                        </div>

                        <div class="feature flex">
                            <div class="feature-text" data-aos="fade-left" data-aos-duration="800"
                                data-aos-delay="200">
                                <div class="feature-header">
                                    <h3>Débogage facile</h3>
                                    <div class="feature-line">
                                    </div>
                                </div>
                                <p>
                                    À chaque instant les utilisateurs peuvent utiliser l'un des trois débogueurs proposés :
                                    <a href="http://pythontutor.com/">Python Tutor</a>, <a
                                        href="https://github.com/alexmojaki/snoop">Snoop</a>, et
                                    <a href="https://github.com/alexmojaki/birdseye">Bird's Eye</a>
                                    (ci-contre)
                                </p>
                            </div>
                            <div class="feature-image" data-aos="fade-right"
                                data-aos-duration="800">
                                <img src="static/img/features/birdseye.png">
                            </div>
                        </div>

                        <div class="feature flex">
                            <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                                <img src="static/img/features/traceback.png">
                            </div>
                            <div class="feature-text" data-aos="fade-right" data-aos-duration="800"
                                data-aos-delay="200">
                                <div class="feature-header">
                                    <div class="feature-line"></div>
                                    <h3>Messages d'erreurs améliorés</h3>
                                </div>
                                <p>
                                    Les messages d'erreurs standards de Python peuvent être déroutants pour des débutants.
                                    futurecoder les complète en ajoutant des conseils précis
                                </p>
                            </div>
                        </div>

                        <div class="feature flex">
                            <div class="feature-text" data-aos="fade-left" data-aos-duration="800"
                                data-aos-delay="200">
                                <div class="feature-header">
                                    <h3>Puzzle de Parsons</h3>
                                    <div class="feature-line"></div>
                                </div>
                                <p>
                                    Si un étudiant est bloqué malgré les différentes aides proposées, 
                                    la solution lui est fournie dans le désordre... À lui de la réorganiser.

                                    Il peut ainsi progresser facilement sans pour autant arrêter de réfléchir !
                                </p>
                            </div>
                            <div class="feature-image" data-aos="fade-right"
                                data-aos-duration="800">
                                <img src="static/img/features/parsons.png">
                            </div>
                        </div>

                        <div class="feature flex">
                            <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                                <img src="static/img/features/solution.png">
                            </div>
                            <div class="feature-text" data-aos="fade-right" data-aos-duration="800"
                                data-aos-delay="200">
                                <div class="feature-header">
                                    <div class="feature-line"></div>
                                    <h3>Solutions pas à pas</h3>
                                </div>
                                <p>
                                    En dernier ressort, les étudiants peuvent afficher une solution partiellement masquée.
                                    Des portions de codes sont dévoilées progressivement, à eux de compléter le reste
                                </p>
                            </div>
                        </div>

                        <h4 class="center-text" data-aos="fade-up" data-aos-duration="800"
                            data-aos-delay="200">
                            Ce qui précède n'est qu'un aperçu des possibilités offertes.
                            <br>Pour plus de détails, <a href="#demo-vid">regardez la vidéo ci-dessous</a> ou
                            <a href="/course/">testez par vous-même !</a>
                        </h4>
                    </div>

                </div>
            </section>

            <section id="demo-vid" data-aos="fade-up" data-aos-duration="800" data-aos-offset="300">
                <div class="container flex center-content">
                    <div>
                        <h2>Regardez une vidéo présentant les avantages du cours :</h2>
                        <!-- https://stackoverflow.com/a/20130011/2482744 -->
                        <div style="position: relative; padding-top: 56.25%">
                            <iframe
                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                                src="https://www.youtube.com/embed/un1BrrV57PA" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </section>

            <section id="email-newsletter" data-aos="fade-up" data-aos-duration="800"
                data-aos-offset="300">
                <div class="container flex">
                    <div class="col">
                        <h2 class="marginless text-right">Vous souhaitez être informé des mises à jour de futurecoder?
                        </h2>
                    </div>
                    <div class="col">
                        <input id="email-input" type="email" placeholder="Email">
                        <button class="button button-primary button-block" onclick="submitEmail()">
                            Envoyer
                        </button>
                        <div id="email-success"
                            style="display: none; margin-top: 0.5em; font-weight: bold; color: #76ff76">
                            <i class="far fa-check-circle"></i>
                            Enregistré !
                        </div>
                    </div>
                </div>
            </section>

            <section id="about">
                <div class="container flex" data-aos="fade-up" data-aos-delay="100"
                    data-aos-duration="800" data-aos-offset="50">
                    <div class="col">
                        <img class="floating-anim-6" id="about-logo" src="static/logo/bordered.png">
                    </div>
                    <div class="col">
                        <h2 class="marginless">À propos</h2>
                        <p>
                            <b>futurecoder est une plateforme libre et open-source permettant 
                                à de grands débutants de découvrir Python par eux-mêmes</b>
                        </p>
                        <h5>Les objectifs à long terme de futurecoder sont ambitieux :</h5>
                        <ul>
                            <li>Révolutionner l'apprentissage de la programmation.
                                Nous sommes persuadés que les plateformes d'apprentissage en ligne pourraient être bien meilleures</li>
                            <li>Proposer les meilleurs cours possibles en permettant à chacun de participer</li>
                            <li>Permettre à chacun d'apprendre la programmation, quel que soit son niveau ou ses aptitudes</li>
                        </ul>
                        <h5>Comment faire ?</h5>
                        <ul>
                            <li>En maintenant les étudiants intéressés et impliqués en leur permettant d'écrire facilement du code</li>
                            <li>En proposant des outils efficaces et faciles d'accès afin de limiter la frustration en cas d'échec</li>
                            <li>En faisant le choix d'utiliser Python, considéré par beaucoup comme le meilleur langage
                                pour apprendre la programmation tout en étant très utilisé dans des applications modernes</li>
                            <li>En s'appuyant sur des outils open-source modernes</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section id="contribute" data-aos="fade-up" data-aos-duration="800">
                <div class="container flex">
                    <div class="col">
                        <p class="text-right">
                            Il s'agit d'un projet sans fin...
                            Il reste beaucoup de travail à faire pour rendre le site encore meilleur.
                            Toutes les participations sont les bienvenues.
                        </p>
                    </div>
                    <div class="col">
                        <img class="tech-stack-icon floating-anim-5"
                            src="static/img/icons/python.png">
                        <img class="tech-stack-icon floating-anim-7"
                            src="static/img/icons/react.png">
                        <h3 class="marginless">Vous souhaitez participer au développement ou proposer du contenu ?
                        </h3>
                        <br>
                        <a href="https://github.com/alexmojaki/futurecoder/blob/main/how_to_contribute.md"
                            class="button button-primary button-block">
                            <i class="fab fa-github"></i>&nbsp&nbsp  Visitez la page du projet sur GitHub
                        </a>
                    </div>
                </div>

                <div class="spacer"></div>
                <div class="spacer"></div>

                <div class="container flex">
                    <div class="col">
                    </div>
                    <div class="col">
                        <h3>Contacts</h3>
                        <p>
                            <i class="fab fa-discord"></i>&nbsp&nbsp
                            <a
                                href="https://discord.gg/KwWvQCPBjW">
                                Discuter sur Discord
                            </a>
                        </p>
                        <p>
                            <i class="fab fa-github"></i>&nbsp&nbsp
                            <a href="https://github.com/alexmojaki/futurecoder/issues/new">
                                Déposer un ticket sur GitHub
                            </a>
                        </p>
                        <p>
                        <p>
                            <i class="fas fa-envelope"></i>&nbsp&nbsp
                            <a href="mailto:hello@futurecoder.io">
                                hello@futurecoder.io
                            </a>
                        </p>
                    </div>
                </div>
            </section>


        </main>

        <footer class="site-footer">
            <div class="footer-dots is-moving-object is-translating" data-translating-factor="160">
                <!-- todo -->
                <!--svg width="69" height="91" xmlns="http://www.w3.org/2000/svg">
                <g fill="#43F1FF" fill-rule="evenodd">
                    <path d="M37.105 41.007l-2.9 1.334-.786 2.823.926 2.689 2.76 1.154 2.6-1.31 1.714-2.533-1.296-2.94z"/>
                    <path fill-opacity=".64" d="M63.109 27.24l-1.45.666-.394 1.412.464 1.344 1.38.577 1.3-.655.856-1.266-.647-1.47z"/>
                    <path fill-opacity=".24" d="M66.226 86.638l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".64" d="M13.497 43.713l-2.175 1-.59 2.118.695 2.016 2.07.866 1.95-.983 1.285-1.9-.972-2.204z"/>
                    <path fill-opacity=".8" d="M59.076 56.658l-2.175 1-.59 2.117.695 2.017 2.07.866 1.949-.983 1.286-1.9-.972-2.204z"/>
                    <path fill-opacity=".48" d="M22.262 18.49l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".64" d="M23.422.5l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".48" d="M2.637 12.5l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47zM36.563 10.856l-.725.334-.197.706.232.672.69.288.65-.327.428-.633-.324-.735z"/>
                </g>
            </svg -->
            </div>
            <div class="container flex">
                <div class="site-footer-inner has-top-divider">
                    <div class="footer-copyright">&copy; 2025 Alex Hall</div>
                    <!--ul class="footer-social-links list-reset">
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Facebook</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Twitter</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Google</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                </ul-->
                </div>
            </div>
        </footer>
    </div>

    <script src="static/js/main.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script type="text/javascript" src="static/js/warpspeed.min.js"></script>
    <script>
        new WarpSpeed(
            "canvas", {
                "speed": 2,
                "speedAdjFactor": 0,
                "density": 1.5,
                "shape": "square",
                "warpEffect": true,
                "warpEffectLength": 10,
                "depthFade": true,
                "starSize": 3,
                "backgroundColor": "hsl(263,45%,7%)",
                "starColor": "#eee"
            }
        );
    </script>
</body>

</html>
